/**
综合的子集路由
 */
<template>
  <div class="content">
    <div class="content_left">
      <div class="content_left_title">
        <router-link to="/recommended">推荐</router-link>|
        <router-link to="/latest">最新</router-link>|
        <router-link to="/hotlist">热榜</router-link>
      </div>
      <router-view></router-view>
    </div>

    <!-- 右侧图片区域 -->
    <div class="content_right">
      <UserInfo />
    </div>
  </div>
</template>

<script>
import UserInfo from "../../../components/aside/UserInfo.vue";
export default {
  name: "ComprehenSive",
  components: {
    UserInfo,
  },
  setup() {},
  data() {
    return {
      lists: [
        { name: "推荐", path: "/recommended" },
        { name: "最新", path: "/latest" },
        { name: "热榜", path: "/hotlist" },
      ],
    };
  },
  methods: {
    load() {
      this.count += 2;
    },
  },
};
</script>

<style scoped lang='scss'>
.router-link-active {
  color: #1e80ff;
}
.content {
  width: 960px;
  height: 100%;
  margin: auto;
  padding-top: 115px;
  position: relative;
  &_left {
    width: 700px;
    background-color: #fff;
    &_title {
      display: flex;
      height: 46px;
      width: 100%;
      line-height: 46px;
      padding-left: 20px;
      border-bottom: 1px solid hsla(0, 0%, 59.2%, 0.1);
      a {
        margin: 0 10px;
        font-size: 14px;
        &:hover {
          color: #1e80ff;
        }
      }
    }
  }
  &_right {
    position: absolute;
    top: 115px;
    right: 0;
    background-color: #fff;
  }
}
</style>
